<template>
  <!-- 1.创建图表放置区域 -->

  <div id="b2_chart" style="height: 100%;"></div>
  <!-- <div id="container"></div> -->
</template>


// <script setup>
// onMounted是vue3的生命周期函数之一，意思是在组件挂载之后再调用。
import {onMounted} from "vue";
// 1.导入折线图 使用import导入对应的图表
import { Line } from "@antv/g2plot";

// 2.创建图表对象
// 创建一个绘制图表的函数，然后在我们div加载之后去调用函数， --window.onload = function()--生命周期


//3.3图表的数据
const data=[
  {

    "date": "3:54:04",
    "type": "value1",
    "value": 82
  },
  {
    "date": "3:54:04",
    "type": "value2",
    "value": 110
  },
  {
    "date": "3:53:04",
    "type": "value1",
    "value": 112
  },
  {
    "date": "3:53:04",
    "type": "value2",
    "value": 84
  },

  {
    "date": "3:52:04",
    "type": "value1",
    "value": 102
  },
  {
    "date": "3:52:04",
    "type": "value2",
    "value": 95
  },

  {
    "date": "3:51:04",
    "type": "value1",
    "value": 70
  },
  {
    "date": "3:51:04",
    "type": "value2",
    "value": 75
  },

  {
    "date": "3:50:04",
    "type": "value1",
    "value": 90
  },
  {
    "date": "3:50:04",
    "type": "value2",
    "value": 80
  },

  {
    "date": "3:49:04",
    "type": "value1",
    "value": 75
  },
  {
    "date": "3:49:04",
    "type": "value2",
    "value": 108
  },

  {
    "date": "3:48:04",
    "type": "value1",
    "value": 114
  },
  {
    "date": "3:48:04",
    "type": "value2",
    "value": 94
  },
  {
    "date": "3:47:04",
    "type": "value1",
    "value": 81
  },
  {
    "date": "3:47:04",
    "type": "value2",
    "value": 101
  },

  {
    "date": "3:46:04",
    "type": "value1",
    "value": 85
  },
  {
    "date": "3:46:04",
    "type": "value2",
    "value": 98
  },

  {
    "date": "3:45:04",
    "type": "value1",
    "value": 86
  },
  {
    "date": "3:45:04",
    "type": "value2",
    "value": 86,
  }
]



let options={
      data,
      xField: 'date',
      yField: 'value',
      yAxis: {
        label: {

  formatter: (v) => {
    const rangeStart = 70;
    const rangeEnd = 120;
    const interval = 10;
    if (v >= rangeStart && v <= rangeEnd) {
      const value = (v / interval).toFixed(0) * interval;
      return value;
    }
    return v;
  },
},
},
        seriesField: 'type',
      };
      // seriesField: 'type',
    // );
    // b2line.render()
    
// 
  


// 3.1初始化图表的方法
const init1Chart =()=>{
  let b2Line  = new Line(document.getElementById('b2_chart'),options)

  b2Line.render()
}
// 4 在onMounter()方法中调用初始化图表的方法

onMounted(()=>{
  init1Chart();
})

</script>


<style lang='scss' scoped>
/* 样式代码 */

</style>